/**
author: sailing
date: 2016/11/21
****/
<style lang='less'>
.container{
  margin:auto 0;
  position:relative;
  height:100%;
  overflow:hidden;	
  .containerApp{
    width:100%;
    height:100%;
    padding-top:10px;
    margin-left: 0;
    transition:margin-left 1s ease 0s;
    position:absolute;
  }
}
</style>
<template>
  <div class="container">
    <div class="containerApp" id="containerApp">
      <el-tabs @tab-click="handleClick" style='width:100%' :active-name="activeName">
        <el-tab-pane label="系统日志" name="first"><mrgFiber></mrgFiber></el-tab-pane>
        <el-tab-pane label="日志分析" name="chart"><chartIndex></chartIndex></el-tab-pane>
        <el-tab-pane label="在线用户管理" name="second"><session></session></el-tab-pane>
        
      </el-tabs>
    </div>
  </div>
</template>

<script>
import toolbar from './toolbar'
import eventBus from '../eventBus'
import mrgFiber from './fiber/mrgFiber'
import chartIndex from './chart/index'
import session from './session/mrgFiber'
import indexInformation from './fiberInformation/index'
export default {
  data () {
    return {
      marginLeft: 0,
      activeName: 'first'
    }
  },
  components: {
    toolbar,
    mrgFiber,
    session,
    indexInformation,
    chartIndex
  },
  methods: {
    checkedData () {
      console.log('kkkkkkkkkkkkkkkkkkkkkk')
    },
    handleClick (tab) {
      console.log('clickNav:', tab)
      this.activeName = tab.name
    }
  },
  mounted () {
    const that = this
    eventBus.bus.$on('showAllPort', function (data) {
      that.activeName = 'second'
      console.log('that.activeName:', that.activeName)
    })
  }
}

</script>